import React from 'react';
import {Layout, Menu , Icon ,Breadcrumb} from 'antd';
import {connect} from 'react-redux';
import {withRouter,Link} from 'react-router-dom'
import {actionCollapsed ,loadMenus,initializeMenu} from '../../redux/menu/menu.redux.js';
import {actionLogout} from '../../redux/login/login.redux';
import { getItem } from '../../utils/store';
import { injectIntl } from 'react-intl';
let leve = new Map();
let url2Leve = new Map();

@withRouter
@connect(state => state, {actionCollapsed, actionLogout,loadMenus,initializeMenu})
class SysHeader extends React.Component {
    constructor(props) {
        super(props);
        const common=this.props.intl.messages.common;
        this.extraBreadcrumbItems = null;
        this.userinfo = JSON.parse(getItem('token'));
        this.toggle = this.toggle.bind(this);
        this.handleLogout = this.handleLogout.bind(this);
        this.menuClick = this.menuClick.bind(this);
        this.goBack = this.goBack.bind(this);
        this.state={
            menusList:[],
            breadMenus:[]
        }
    }


    toggle() {
        // this.props.actionCollapsed(!this.props.menu.collapsed);
        // // 设置主窗口大小
        // console.log(this.props.menu.collapsed,this.props.marginLeft)
        this.props.setSize(this.props.marginLeft);
    }

    handleLogout() {
        this.props.initializeMenu();        
        this.props.actionLogout();
        this.props.history.replace('/newLogin');
    }

    menuClick(e) {
        if (e.key === 'logout') {
            this.handleLogout();
        }
    }

    goBack(){
        if(this.props.history)
            this.props.history.goBack();
    }


    // 页面初始化完成后加载菜单
    componentWillReceiveProps(nextProps){

        let menusList = nextProps.menu.menusList;
        console.log(menusList);
        this.setState({
            menusList:menusList||[]
        })
    }
    

    flag=(breadcrumbArr)=>{
        // debugger;
            return breadcrumbArr.map((item,index)=>{
                return(
                    index===0||index===breadcrumbArr.length-1?
                        <Breadcrumb.Item key={index} style={{color:'#1890ff'}}>
                            {item.name}
                        </Breadcrumb.Item>
                        :
                        <Breadcrumb.Item key={index}>
                            <Link to={item.url} style={{color:'#1890ff'}}>
                                {item.name}
                            </Link>
                        </Breadcrumb.Item>
                )}
            )

    }

    test=(cur)=>{
        debugger;
        if(cur[0].parentId==="000") return;
        let parent=this.state.menusList.filter(k=>(k.id===cur[0].parentId));
        cur.unshift(parent[0]);
        return this.test(cur);
    }
    getHome = () => {
        debugger;
        let cur=this.state.menusList.filter(k=>(k.url===this.props.location.pathname));
        if(cur.length===1){
            this.test(cur);
        }
        if(cur.length===2){
            this.test([cur[1]]);
        }
        return this.flag(cur);
    };

    render() {
        const common=this.props.intl.messages.common;
        return (
            <div>
            <Layout.Header style={{ background: '#fff', padding: 0,marginLeft:16,height: 50,lineHeight: '50px'}}>
                <div style={{float:'left'}}>
                    <Icon
                        className='trigger'
                        type={this.props.menu.collapsed ? 'menu-unfold' : 'menu-fold'}
                        onClick={this.toggle}
                    />
                </div>
                <div style={{float:'left'}}>
                    <Breadcrumb style={{height:'50px',lineHeight:'50px'}}>
                        {this.state.menusList.length>0?this.getHome():null}
                    </Breadcrumb>
                </div>
                <Menu
                    mode="horizontal"
                    onClick={this.menuClick}
                    style={{ lineHeight: '50px', float: 'right' }}>
                    <Menu.SubMenu title={
                        <span style={{display:'flex'}}>
                            <span onClick={this.handleLogout}>{common.logout}</span>
                        </span>
                    }>
                    </Menu.SubMenu>
                </Menu>
                <span style={{ display:'flex',lineHeight: '50px', float: 'right',alignItems:'center' }}>
                    <img src={require('../../img/png/companyIcon.png')} style={{width:28,height:28,marginRight:10}}/>
                    {common.EnterpriseCode}：
                    <span style={{marginRight:10}}>{this.userinfo?this.userinfo.comPanyId:''}</span>
                    {common.account}：
                    {this.userinfo ? this.userinfo.userACcount : null}
                    &nbsp;&nbsp;&nbsp;&nbsp;|
                </span>
            </Layout.Header>
            </div>
        );
    }
}

export default injectIntl(SysHeader);